<template>
  <div class="notification-bar" v-if="notifications.length > 0">
    <div class="notification-icon">
      <i class="fas fa-bullhorn"></i>
    </div>
    <div class="notification-content">
      {{ notifications[0].content }}
    </div>
    <div class="notification-action">
      查看
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'NotificationBar',
  computed: {
    ...mapState(['notifications'])
  }
}
</script>

<style scoped>
.notification-bar {
  margin: 16px;
  background-color: #fff7e6;
  border: 1px solid #ffe7ba;
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
}

.notification-icon {
  color: #fa8c16;
  font-size: 18px;
  margin-right: 10px;
}

.notification-content {
  flex: 1;
  font-size: 13px;
  color: #333;
}

.notification-action {
  color: #1890ff;
  font-size: 13px;
  margin-left: 10px;
}
</style> 